<template>
    <div class="box1">
        <router-link to="/classmanager/classdetails/studentinformation" class="navs">学生信息</router-link>
        <router-link :to='"/classmanager/classdetails/courseinformation?clazzId="+this.$route.query.clazzId+"&clazzName="+this.$route.query.clazzName' class="navs">课程信息</router-link>
        <div class="btnBox">
            <el-button class="btn" type="success" @click="centerDialogVisible = true" :disabled="submitFlag">调班</el-button>
            <el-button class="btn" type="primary" icon="el-icon-circle-plus-outline" @click="toAdd()">添加</el-button>
            <h3 @click="$router.push('/classmanager')">返回</h3>
        </div>
        <el-table class="tab" :data="studentInfo" @selection-change="Select" :row-key="getRowKey">
			<el-table-column type="selection" :reserve-selection="true" width="100"></el-table-column>
			<el-table-column label="姓名" prop="stuName"></el-table-column>
			<el-table-column label="学号" prop="stuNum"></el-table-column>
			<el-table-column label="性别" prop="stuSex"></el-table-column>
			<el-table-column label="联系方式" prop="stuTel"></el-table-column>
            <el-table-column label="家庭住址" prop="stuHometown"></el-table-column>
			<el-table-column >
				<template slot-scope="sc">
                    <a href="#" style="color: #106ab1;" @click="Details(sc.row)">详情</a>
                </template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="sc">
                    <a href="#" style="color: #ff0000;" @click="del(sc.row)">删除</a>
                </template>
			</el-table-column>
		</el-table>
    
            <el-pagination
                class="page"
                layout="prev, pager, next"
                :total="totalSize"
				:current-page="pageIndex"
				@current-change="changePage"
				:page-size="pageSize">
            </el-pagination>
       
        

        <el-dialog
			title="班级调整"
			:visible.sync="centerDialogVisible"
			width="30%"
			center>
			<div class="text">
				<span>新的班级：</span>
				<el-select v-model="Class.clazzId" placeholder="请选择">
                    <el-option 
                        v-for="item in Class" 
                        :key="item.clazzId" 
                        :label="item.clazzName" 
                        :value="item.clazzId">
                    </el-option>
				</el-select>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button style="background: #106ab1; color: #fff;" @click="moveClass">确 定</el-button>
				<el-button style="background: #999; color: #fff;" @click="centerDialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
        <el-dialog
			class="dialog"
			:visible.sync="flag"
			width="30%"
			center>
			<b>确认删除该学生</b>
			<span slot="footer" class="dialog-footer">
				<el-button style="background: #106ab1; color: #fff;" @click="delStudent">确 定</el-button>
				<el-button style="background: #999; color: #fff;" @click="flag = false">取 消</el-button>
			</span>
		</el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            baseUrl:require("../js/baseUrl.js").baseUrl,
            centerDialogVisible:false,
            flag:false,
            pageIndex:1,//当前显示的页
			pageSize:5,//每页显示的条数
            totalSize:0,
            studentInfo:[],
            Class:'',
            liststuId:[],
            reliststuId:[],
            studentData:'',
            submitFlag: true,
        }
    },
    methods:{
        getRowKey(row){
            return row.stuId;
        },
        toAdd(){
            this.$router.push('/classmanager/classdetails/addstudent?clazzId='+this.$route.query.clazzId+'&clazzName='+this.$route.query.clazzName)
        },
        //班级详情:SchoolSys/clazz/clazzid
        classDetails(){
            this.$http.post(this.baseUrl+'SchoolSys/clazz/clazzid',{
                    clazzId:this.$route.query.clazzId,
					pageIndex:this.pageIndex,
					pageSize:this.pageSize
				}).then(res=>{
					// console.log(res.data.data);
                    if(res.data.code==200){
                        this.studentInfo=res.data.data.data
                        this.totalSize=res.data.data.totalSize
                    }
                    
				})
        },
       
        //分页
        changePage(page){
            this.pageIndex=page;
            this.classDetails()
        },
        Details(StudentData){
            // console.log(StudentData);
            this.$router.push('/classmanager/classdetails/studentdetails?stuId='+StudentData.stuId+'&clazzId='+StudentData.clazzId+'&clazzName='+this.$route.query.clazzName)
        },
        //获取新班级的id：SchoolSys/clazz/like
        getClassId(){
            this.$http.post(this.baseUrl+'SchoolSys/stu/clazzlist',{

            }).then(res=>{
                // console.log(res.data.data);
                if(res.data.code==200){
                    this.Class=res.data.data
                }
            })
        },
        //调班：SchoolSys/clazz/shifts
        moveClass(){
            this.$http.post(this.baseUrl+'SchoolSys/clazz/shifts',{
                clazzId:this.Class.clazzId,
                liststuId:this.reliststuId
            }).then(res=>{
                // console.log(res);
                if(res.data.code==200){
                    this.classDetails()
                    this.$message.success('学生调班成功')
                }else{
                    this.$message.error('学生调班失败')
                }
                
            })
            this.centerDialogVisible = false
        }, 
        //获取所选学生的id
        Select(stuData){
            // console.log(stuData);
            let arr=[]
            stuData.map((v) => {
                arr.push(v.stuId)
            })
            this.liststuId=arr
            // console.log(this.liststuId);
            
            const countMap = new Map();
            let realList=[]
            this.liststuId.forEach(v=>{
                if(countMap.has(v)){
                countMap.set(v, countMap.get(v) + 1);
                }else{
                countMap.set(v, 1);
                }
            })
            // console.log(countMap)
            countMap.forEach((count, num) => {
                if(count%2==0){
                
                }else{
                realList.push(num)
                }
            });
            this.reliststuId=realList
            // console.log(this.reliststuId);
            if(this.reliststuId!=''){
                this.submitFlag=false
            }else{
                this.submitFlag=true
            }
            
        },
        //删除:SchoolSys/clazz/deleteclazzstuid
        del(studentData){
            // console.log(studentData);
            this.studentData=studentData
            this.flag=true
        },
        delStudent(){
            this.$http.post(this.baseUrl+'SchoolSys/clazz/deleteclazzstuid',{
                stuId:this.studentData.stuId,
                clazzId:this.studentData.clazzId
            }).then(res=>{
                // console.log(res);
                if(res.data.code==200){
                    this.classDetails()
                    this.$message.success('该学生删除成功')
                }else{
                    this.$message.error('该学生删除失败')
                }
            })
            this.flag=false
        }
    },
    mounted(){
        this.classDetails()
        this.getClassId()
    }
}
</script>

<style lang="less">
    .box1{
        .btnBox{
            position: absolute;
            top: 40px;
            right: 40px;
        }
        .btn{
            height: 40px;
            margin-right: 20px;
        }
        h3{
            display: inline-block;
            cursor: pointer;
        }
        .el-button+.el-button, .el-checkbox.is-bordered+.el-checkbox.is-bordered {
            margin-left: 0;
        }
        .dialog{
            b{
                display: block;
                text-align: center;
            }
        }
        .el-button+.el-button, .el-checkbox.is-bordered+.el-checkbox.is-bordered {
            margin-left: 10px;
        }
        i{
            margin-top: 0;
        }
        .pageBox{
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
			bottom: 40px;
		}
        
        .el-table__header
        .el-table-column--selection
        .cell
        .el-checkbox:after {
            color: #333;
            content: "全选";
            font-size: 14px;
            margin-left: 5px;
            font-weight: bold;
            
        }
        
    }
</style>